<template>
  <div class="back">
    <div id="main_a" style="width: 300px; height: 350px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      myChart: null,
      option: {
        title: {
          text: '库房状态', // 设置图表的标题
          top: '10%', // 标题的位置
          left: 'center', // 标题水平居中
          textStyle: {
            fontSize: 21, // 标题字体大小
            fontWeight: 'bold' // 标题字体粗细
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)' // 显示饼图提示框中的名称、值和百分比
        },
        legend: {
          //   top: '5%',
          //   left: 'center'
          bottom: '10%',
          left: 'center'
        },
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff',
          '#ea7ccc',
          '#ee6666',

          '#006cff',
          '#60cda0',
          '#ed8884'
        ],
        series: [
          {
            name: '库房状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'outside',
              formatter: '{b}\n{c} ({d}%)' // 在每个扇区上显示名称、值和百分比
            },
            labelLine: {
              show: true,
              length: 30,
              length2: 20
            },
            data: [
              { value: 104, name: '使用' },
              { value: 535, name: '未使用' },
              { value: 80, name: '其他' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(document.getElementById('main_a'))
      this.myChart.setOption(this.option)
    }
  }
}
</script>

<style>
/* Add any necessary styles for your component */
</style>
